<template>
  <div class="space">
    <!-- top -->
    <van-nav-bar left-arrow @click-left="$router.go(-1)" />
    <!-- body -->
    <div class="body">
      <div class="user-info-bg">
        <div class="user-info">
          <h3 class="name">{{ spaceData.userNickName }}</h3>
          <p class="datetime">
            社区会龄&nbsp;&nbsp;/&nbsp;&nbsp;{{ spaceData.age }} 年
          </p>
          <div class="action-container">
            <span class="item-message" @click="follow" :class="spaceData.voted ?'follow':''">{{
              spaceData.voted ? "已关注" : "+关注"
            }}</span>
            <span class="item-message" @click="send">短信息</span>
          </div>
        </div>
        <div class="avatar">
          <img :src="`https://file.ituring.com.cn/SmallCover/${spaceData.avatarImageKey ? spaceData.avatarImageKey : ''
            }`" />
        </div>
      </div>
      <div class="main">
        <!-- 作品/文章/粉丝 -->
        <div class="main-header">
          <div class="item">
            <p class="name">作品</p>
            <p class="count">{{ spaceData.categoryCount }}</p>
          </div>

          <img src="https://m.ituring.com.cn/img/biasLine.ccea6a13.svg" alt="" />

          <div class="item">
            <p class="name">文章</p>
            <p class="count">{{ spaceData.articleCount }}</p>
          </div>

          <img src="https://m.ituring.com.cn/img/biasLine.ccea6a13.svg" alt="" />

          <div class="item">
            <p class="name">粉丝</p>
            <p class="count">{{ spaceData.followerCount }}</p>
          </div>
        </div>
        <!-- item -->
        <div class="main-body">
          <section>
            <h3>作品</h3>
            <p>没有内容</p>
          </section>
          <section>
            <h3>文章</h3>
            <p>没有内容</p>
          </section>
          <section>
            <h3>评论</h3>
            <p>没有内容</p>
          </section>
          <section>
            <h3>文集</h3>
            <div class="collection-item">
              <div class="content">
                <h4 class="title">未分类</h4>
                <p class="count">0篇文章·0推荐·0阅读</p>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { SpaceAPI, FollowUserAPI, } from "@/apis";
import { Toast } from 'vant';
export default {
  props: ['id'],
  data() {
    return {
      spaceData: {},
    };
  },
  mounted() {
    this.getData();
  },
  computed: {
    // 是否关注
    isFollow() {
      if (this.spaceData.voted) {
        return "UnFollow";
      } else {
        return "Follow";
      }
    },
  },
  methods: {
    // 网络请求
    async getData() {
      // 主要网络请求
      let { data } = await this.$http(SpaceAPI(this.id), {
        headers: {
          Authorization:
            "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
        },
      });
      this.spaceData = data;
    },
    // 关注
    async follow() {
      if (this.id == 608026) {
        Toast('不可以关注自己')
      }
      else {
        // 发送请求
        await this.$http.post(
          FollowUserAPI(this.isFollow, this.spaceData.id),
          {},
          {
            headers: {
              Authorization:
                "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
            },
          }
        );
        // 刷新数据
        this.getData();
      }
    },
    // 发信息
    send() {
      if (this.id == 608026) {
        Toast('不可以给自己发信息')
      }
      else {
        console.log(11);
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.space {
  position: relative;
  width: 100vw;
  background-color: #fff;
  z-index: 999;

  // top
  .van-nav-bar {
    background-color: #2837b4;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
  }

  // body
  .body {
    padding: 50px 0px;
    background-color: #fff;

    .user-info-bg {
      width: 375px;
      height: 170px;
      background-color: #2837b4;
      display: flex;
      justify-content: space-between;
      padding: 0 15px 20px;

      .user-info {
        color: #fff;
        padding-top: 60px;

        .name {
          font-size: 20px;
          line-height: 26px;
        }

        .datetime {
          font-size: 14px;
          line-height: 19px;
          margin-top: 5px;
          opacity: 0.7;
        }

        .action-container {
          margin-top: 15px;

          .item-message {
            font-size: 12px;
            background-color: #ffffff1a;
            line-height: 25px;
            margin-right: 15px;
            padding: 0 10px;
            display: inline-block;
            &.follow{
              background-color: #fff;
              color: var(--theme-blue);
              font-weight: bold;
            }
          }
        }
      }

      .avatar {
        padding-top: 60px;

        img {
          width: 55px;
          height: 55px;
          border-radius: 55px;
        }
      }
    }

    .main {
      .main-header {
        padding: 25px 15px;
        display: flex;
        border-bottom: 1px solid #eee;

        .item {
          .name {
            font-size: 14px;
            line-height: 23px;
            color: var(--more-font-grey);
          }

          .count {
            margin-top: 2px;
            font-size: 16px;
            line-height: 18px;
            color: #262628;
            font-weight: bold;
          }
        }

        img {
          margin: 0 15px;
        }
      }

      .main-body {
        padding: 20px 15px;

        section {
          padding-top: 20px;

          h3 {
            color: #121213;
            font-size: 16px;
            line-height: 21px;
            font-weight: bold;
          }

          p {
            margin-top: 10px;
            color: var(--more-font-grey);
            font-size: 14px;
            line-height: 19px;
            text-align: center;
          }

          .collection-item {
            background-color: #fcf8e3;
            padding: 10px 12px;
            margin-top: 20px;
            border: 1px solid var(--tag-font-orange);

            .content {
              padding: 10px 0 10px 28px;
              border-left: 1px solid var(--tag-font-orange);

              h4.title {
                color: var(--tag-font-orange);
                font-size: 20px;
                line-height: 28px;
              }

              p.count {
                color: var(--more-font-grey);
                font-size: 14px;
                line-height: 20px;
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
}
</style>